<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%@taglib prefix="mvc" uri="http://www.springframework.org/tags/form" %>
<%@taglib prefix="fmt" uri="http://www.springframework.org/tags" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>应急调度管理</title>
    <link rel="stylesheet" href="../../lib/layui/layui/css/layui.css">
    <script type="text/javascript" src="../../lib/layui/layui/layui.js"></script>
    <script type="text/javascript" src="../../lib/jquery-2.1.4.min.js"></script>
    <script type="text/javascript" src="../../lib/layui/layui/layui.all.js"></script>
    <script type="text/javascript" src="../../js/news/jquery-1.9.1.js"></script>
    <script src="/js/base/base.js" type="text/javascript" charset="utf-8"></script>


    <style>
        * {font-family: "Microsoft Yahei" !important;}
        .add{
            margin-top: 10px;
            margin-left: 10px;
        }
        .layui-layer-btn .layui-layer-btn1{
            background: #009688;
            color: #fff;
        }
        #Settlement{
            table-layout: fixed;
            border-collapse: collapse;
            width: 100%;
        }
        .layui-body{overflow-y: scroll;}
        #pensons .layui-table-cell {
            font-size:14px;
            padding:0 5px;
            height:auto;
            overflow:visible;
            text-overflow:inherit;
            white-space:normal;
            word-break: break-all;
            text-align: center;
        }
    </style>
    <link rel="stylesheet" type="text/css" href="/css/commonTheme/${sessionScope.InterfaceModel}/commonTheme.css"/>
</head>
<body>
<button type="button" class="layui-btn  layui-btn-norma add" id="add">添加设备分组</button>
<table id="test" lay-filter="test"></table>

<script type="text/html" id="barDemo">
    <%--<a class="layui-btn layui-btn layui-btn-xs" lay-event="print">打印</a>--%>
    <a class="layui-btn layui-btn-norma layui-btn-xs" lay-event="upd" data-id="" id="upinfo">修改</a>
    <%--<a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="people">人员详情</a>--%>
    <%--<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="thing">物资详情</a>--%>
    <%--<a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="rd">救援调度</a>--%>
    <a class="layui-btn layui-btn-norma layui-btn-xs layui-btn-danger" lay-event="dele">删除</a>

</script>

<script type="text/javascript">
    var laydate;
    var table = layui.table
    var jyuan=""
    layui.use('table', function(){
        var table = layui.table;
        laydate = layui.laydate;
        var tableIns = table.render({
            elem: '#test'
            ,url:'/assetGroup/selectAllBaseInfo'
            ,cols: [[
                {field:'groupId', title:'分组编号',width:'20%', fixed: 'left',}
                ,{field:'groupName', title:'分组名称',width:'60%', edit: 'text'}
                ,{field: 'type',width:'20%',title: '操作',toolbar: '#barDemo'}
            ]]
            ,done:function (res) {

            }
            ,page: true
        });




        //监听行工具事件
        table.on('tool(test)', function(obj){
            var data = obj.data;
            if(obj.event === 'del'){
                layer.confirm('真的删除行么', function(index){
                    obj.del();
                    layer.close(index);
                });
            }else if(obj.event === 'dele'){
                layer.confirm('确定删除？',{
                    btn: ['确定','取消'], //按钮
                }, function(){
                    $.ajax({
                        url:'/assetGroup/delete',
                        type: 'get',
                        dataType: 'json',
                        data:{groupId:data.groupId},
                        success: function (json) {
                            //第三方扩展皮肤
                            layer.msg('<fmt:message code="workflow.th.delsucess" />', {icon: 6});
                            tableIns.reload()
                        }
                    })
                }, function () {
                    layer.closeAll();
                })

            }else if(obj.event === 'upd'){
                //点击修改按钮 回显数据的接口
                $.ajax({
                    url:'/assetGroup/selectById',
                    type: 'get',
                    dataType: 'json',
                    data:{groupId:data.groupId},
                    success:function (res) {
                        $("#groupId").val(res.data.assetIds);
                        $("#groupName").val(res.data.groupName);
                        $("#assetIds").val(res.data.assetNames)
                        $("#assetIds").attr('user_id',res.data.assetIds);
                    }
                });
                layer.open({
                    type: 1 //Page层类型
                    ,area: ['900px', '300px']
                    ,title: '修改设备分组'
                    ,shade: 0.6 //遮罩透明度
                    ,maxmin: true //允许全屏最小化
                    ,content: htmlpoen
                    ,btn: ['保存', '取消']
                    ,yes: function(index, layero){

                        var groupName = $('#groupName').val()
                        var assetIds = $('#assetIds').attr('user_id')
                        var param={
                            assetIds:assetIds,
                            groupName:groupName,
                            groupId:data.groupId
                        }
                        $.ajax({
                            url:'/assetGroup/update',
                            type: 'get',
                            dataType: 'json',
                            data:param,
                            success:function (res) {
                                layer.msg('修改成功', {icon: 6});
                                tableIns.reload()
                                layer.closeAll()
                            }
                        });
                    }
                    ,success:function(e){
                        //点击添加的按钮
                        $(".addjy").on("click",function(){
                            user_id = "assetIds";
                            $.popWindow("/assetGroup/selAsset");
                        });
                        //点击清空的按钮
                        $('.clear').click(function () {
                            $("#assetIds").val("");
                            $("#assetIds").attr('username','');
                            $("#assetIds").attr('dataid','');
                            $("#assetIds").attr('user_id','');
                            $("#assetIds").attr('userprivname','');
                        });
                    }
                });
            }
        });

        var htmlpoen='<div>' +
            '			<form class="layui-form" action="" style="margin-top: 45px;">\n' +
            '<div class="layui-form-item">\n' +
            '<label class="layui-form-label" style="width: 100px">分组名称</label>\n' +
            '<div class="layui-input-block" style="margin-bottom:"15px">\n' +
            '<input type="text" name="groupName"  id="groupName" required  lay-verify="required"  autocomplete="off" class="layui-input" style="width:50%">\n' +
            '</div>'+
            '</div>\n' +
            '<div class="layui-inline" style="width:97%; margin: 15px 0;">\n' +
            '<label class="layui-form-label" style="width:100px;">设备名称</label>\n' +
            '<div class="layui-input-inline" style="width:72%">\n' +
            '<textarea type="text" id="assetIds" name="assetIds"  autocomplete="off" class="layui-input"></textarea>\n' +
            '<input type="hidden"  name="electivePerson" placeholder="" autocomplete="off" class="layui-input">\n'+
            '<div style="float:right;margin: -29px -72px 0px 0px;color:#1E9FFF"><a href="javascript:;" style="color:#1E9FFF" class="addjy">添加</a>\n' +
            '<a href="javascript:;" style="color:#1E9FFF" class="clear">清空</a>' +
            '</div>\n' +
            '</div>\n' +
            '</div>\n'+
            '</form>' +
            '</div>'
        //	物资详情的内容
        // var thinginfo = '<div><table id="Settlement1" lay-filter="SettlementFilter"></table></div>'
        //	人员详情的内容
        //	人员详情的内容

        //点击添加救援事件
        $("#add").click(function(){
            layer.open({
                type: 1 //Page层类型
                ,area: ['900px', '300px']
                ,title: '添加设备分组'
                ,shade: 0.6 //遮罩透明度
                ,maxmin: true //允许全屏最小化
                ,content: htmlpoen
                ,btn: ['保存', '取消']
                ,yes: function(index, layero){
                    var groupName = $('#groupName').val()
                    var assetIds = $('#assetIds').attr('user_id')
                    param={
                        groupName:groupName,
                        assetIds:assetIds,
                    },
                        $.ajax({
                            url:'/assetGroup/add',
                            type: 'get',
                            dataType: 'json',
                            data:param,
                            success:function (res) {
                                layer.msg('保存成功', {icon: 6});
                                tableIns.reload()
                                layer.closeAll()
                            }
                        });

                }
                ,success:function(e){
                    //点击添加的按钮
                    $(".addjy").on("click",function(){
                        user_id = "assetIds";
                        $.popWindow("/assetGroup/selAsset");
                    });
                    //点击清空的按钮
                    $('.clear').click(function () {
                        $("#assetIds").val("");
                        $("#assetIds").attr('username','');
                        $("#assetIds").attr('dataid','');
                        $("#assetIds").attr('user_id','');
                        $("#assetIds").attr('userprivname','');
                    });

                }
            });
        })
    });

    function closex() {
        layer.closeAll()
    }
</script>

</body>
</html>